<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery基础</title>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>获取言语本框中输入的值</h1>
<input type="text" id="testInput" name="test" value="" />
<input type="button" value="输入的值为：" />
<script>
$(document).ready(function(){
    $("input[type='button']").click(function(){
        let inputValue=$("#testInput").val();
        alert(inputValue);
    })
})
</script>


<h1>获取元素并设置CSS样式</h1>
<div class="myclass">注意观察我的样式</div>
<div>我的样式是默认的</div>
<script>
$(document).ready(function() {
    let myclass=$(`.myclass`);
    myclass.css(`background-color`,`#f00`);
    myclass.css(`color`,`#fff`);
})
</script>

<h1>更换网页背景</h1>
<select name="" id="color">
    <option value="">请选择背景颜色</option>
    <option value="red">红色</option>
    <option value="green">绿色</option>
    <option value="blue">蓝色</option>
</select>
<input type="button" id="b2" value="更换背景" />
<script>
$(document).ready(function() {
    $(`input[type='button']`).click(function() {
        let bgcolor=$(`#color`).val();
        document.bgColor=bgcolor;
    })
})
</script>

<h1>输出文本框中的值</h1>
自我评价：
<textarea name="intro" id="intro" cols="30" rows="10"></textarea>
<input type="button" value="输出">
<script>
$(document).ready(function() {
    $(`input[type='button']`).click(function() {
        let textss=$(`#intro`).val();
        alert(textss);
    });
});
</script>
</body>
</html>